<template>
 <!-- 饼图 -->
 <div class="echarts-x" ref="pie"></div>
</template>
<script setup>
import * as echarts from "echarts";
const props = defineProps({
  title:{
    type:[Object,Array],
    default:()=>null
  },
  legend:{
    // 图例
    type:[Object,Boolean],
    default:false
  },
  emphasis:{
    //高亮状态的扇区和标签样式
    type:Object,
    default:()=>{}
  },
  tooltip:{
    // 鼠标移入显示
    type:[Boolean,Object],
    default:false
  },
  ChartName:{ // 图表名称
    type:String,
    default:''
  },
  ChartData:{ //图表数据
    type:Array,
    default:()=>[]
  },
  series:{ 
    type:Array,
    default:()=>null    
  },
  radius:{
    type:[Number,String,Array],
    default:()=>[0,'75%']
  },
  avoidLabelOverlap:{ //是否启用防止标签重叠策略
    type:Boolean,
    default:false
  },
  label:{
    type:[Object,Boolean],
    default:()=>false
  },
  labelLine:{
    type:[Object,Boolean],
    default:()=>false
  },
  color:{
    type:Array,
    default:()=>['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
  },
  option:{
    type:Object,
    default:()=>null
  },
  roseType:{
    // 是否展示成南丁格尔图,
    type:[String,Boolean],
    validator(value) {
      return [false, 'radius', 'area'].includes(value)
    },
    default:false
  },
  itemStyle:{
    type:Object,
    default:()=>null
  },
  superOption:{
    type:Object,
    default:()=>{}
  }
})
watch(props,()=>{
  init()
})
onMounted(() => {
  init();
});
const pie = ref(null)
const init = () =>{
  const myChart = echarts.init(pie.value);
  const option = {
    title:props.title,
    tooltip: {
    show:props.tooltip,
    trigger: 'item',
    ...props.tooltip
  },
  legend: {
    show:props.legend,
    top: 0,
    left: 'center',
    textStyle:{
      color:'#fff',
    },
    ...props.legend,
  },
  itemStyle:props.itemStyle,
  roseType:props.roseType,
  color:props.color,
  series: props['series']??[
    {
      name: props.ChartName,
      type: 'pie',
      radius: props.radius,
      avoidLabelOverlap: props.avoidLabelOverlap,
      label: {
        show: props.label,
        position: 'outside',
        textBorderColor:'transparent',
        color:'#fff',
        ...props.label
      },
      emphasis: {
        label: {
          show: props.emphasis
        },
        ...props.emphasis
      },
      labelLine: {
        show: props.labelLine
      },
      data: props.ChartData
    }
  ],
  ...props.superOption
  }
  myChart.setOption(props.option??option)
  window.addEventListener("resize", () => {
    myChart.resize();
  });
}
</script>
<style scoped>
.echarts-x {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
</style>